/*
 * @Author: zhumeng@sensorsdata.cn
 * @Date: 2024-04-02 20:12:58
 * @LastEditTime: 2024-04-03 20:46:24
 * @Description:
 */

import React from 'react'

import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarMenuToggle,
  Avatar
} from '@nextui-org/react'
import Login from '../Login'

export default function HomeNavbar(props) {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
  const [isLogin, setIsLogin] = React.useState(true)
  const { children } = props
  const renderLogin = () => {
    return (
      <>
        <NavbarItem>
          <img src="/img/setting.png" width={24} height={24} />
        </NavbarItem>
        <NavbarItem>
          <Avatar name="Meng" />
        </NavbarItem>
      </>
    )
  }
  return (
    <Navbar onMenuOpenChange={setIsMenuOpen}>
      <NavbarBrand>
        <img src={'/logo.png'} width={24} height={24} />
        <p className="font-bold text-inherit">Tu</p>
      </NavbarBrand>
      {/* 
      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        <NavbarItem>
          <Link color="foreground" href="#">
            设置
          </Link>
        </NavbarItem>
      </NavbarContent> */}

      <NavbarContent justify="end">
        <NavbarMenuToggle
          aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
          className="sm:hidden"
        />
        {children}
        {isLogin ? (
          renderLogin()
        ) : (
          <>
            <NavbarItem className="hidden lg:flex">
              <Login />
            </NavbarItem>
          </>
        )}
      </NavbarContent>
    </Navbar>
  )
}
